<template>
  <div>
    <el-form :model="formItem" label-width="100px" size="mini" class="form-view">
      <el-row>
        <el-col :span="12">
          <el-form-item label="标题" prop="title">
            {{ formItem.title }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="验收日期" prop="receiveDate">
            {{ formItem.receiveDate }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同号" prop="contractName">
            {{ formItem.contractName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购置日期" prop="purchaseDate">
            {{ formItem.purchaseDate }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            {{ formItem.remark }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="附件">
            <el-button v-for="tag in formItem.annex" :key="tag.name" size="mini" type="text" @click.native="downloadFile(tag)">{{ tag.name }}</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="到货明细">
            <el-table
              :loading="false"
              :data="formItem.arrivalCount"
              border
              class="fixed-table-table"
              size="mini"
              max-height="240px"
            >
              <el-table-column
                label="序号"
                type="index"
                width="50"
                header-align="center"
                align="center"
              />
              <el-table-column v-for="column in insideColumns" :key="column.key" header-align="center" align="center" :label="column.title" :prop="column.key" :sortable="column.sortable">
                <template slot-scope="scope">
                  <column-render :render="column.render" :row="scope.row" :column="column" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="资产明细">
            <el-button size="mini" type="primary" icon="el-icon-printer" @click="print">批量打印</el-button>
            <el-table
              :columns="assetColumns"
              :loading="false"
              :data="formItem.assetList"
              :multiple-selected="formItem.categories !== '3'"
              border
              class="fixed-table-table"
              size="mini"
              max-height="240px"
              style="width: 100%;"
              @selection-change="onSelectionChange"
            >
              <el-table-column type="selection" width="50" />
              <el-table-column v-for="column in assetColumns" :key="column.key" header-align="center" align="center" :label="column.title" :prop="column.key" :sortable="column.sortable">
                <template slot-scope="scope">
                  <column-render :render="column.render" :row="scope.row" :column="column" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <FormDialog
      class="fixed-dialog-height"
      title="编辑"
      :show.sync="dialogFormVisible"
      width="90%"
      :append-to-body="true"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <EditForm v-if="dialogFormVisible" :id="editId" ref="editForm" :categories="categories" belongs="sl" />
    </FormDialog>
  </div>
</template>
<script>
import { detail } from '@neu/dcam-ui/api/rukuSL'
// import PageableTable from '@neu/biz-core/components/PageableTable'
import { formatDate } from '@neu/biz-core/utils/utils'
import Printer from '@neu/dcam-ui/views/fixedAsset/Printer'
import { getMyPrinter } from '@neu/dcam-ui/api/printer'
import annex from '@neu/dcam-ui/mixins/annex'
import FormDialog from '@neu/biz-core/components/FormDialog'
import EditForm from '@neu/dcam-ui/views/fixedAsset/components/editForm'

const formItem = {
  title: '',
  receiveDate: '',
  contractCode: '',
  contractName: '',
  remark: '',
  annex: [],
  arrivalCount: [],
  assetList: []
}
export default {
  components: {
    // PageableTable,
    FormDialog,
    EditForm
  },
  // 加入混入
  mixins: [annex],
  props: {
    taskId: {
      required: false,
      type: String,
      default: 'NULL'
    },
    workOrderNum: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editId: null,
      dialogFormVisible: false,
      categories: null,
      detailPageTable: 'detailPageTable',
      formItem: {
        ...formItem
      },
      selectionRows: [],
      // 表格列
      insideColumns: [
        { title: '分类', width: 100, key: 'typeName' },
        { title: '产品名称', width: 100, key: 'productName' },
        { title: '规格型号', width: 100, key: 'specification' },
        { title: '单价', width: 100, key: 'amount' },
        { title: '入库数量', width: 100, key: 'count' }
      ],
      assetColumns: [
        { title: '资产名称', width: 140, key: 'productName', display: true },
        { title: '资产编号', width: 140, key: 'code', display: true },
        // { title: '大分类', width: 100, key: 'bigTypeName', display: true },
        // { title: '中分类', width: 100, key: 'middleTypeName', display: true },
        // { title: '小分类', width: 100, key: 'smallTypeName', display: true },
        { title: '分类', width: 100, key: 'typeName', display: true },
        { title: '购置日期', width: 100, key: 'purchaseDate', render: (h, params) => { return h('span', formatDate(params.row.purchaseDate, 'YYYY-MM-DD')) }, display: true },
        { title: '位置', width: 160, key: 'locationName', display: true },
        { title: '计量单位', width: 100, key: 'measureUnit', display: true },
        { title: '规格型号', width: 100, key: 'specification', display: true },
        { title: '品牌', width: 100, key: 'brand', display: true },
        { title: '使用期限', width: 100, key: 'usePeriod', display: true },
        { title: '维保开始', width: 150, key: 'maintenanceStartTime', render: (h, params) => { return h('span', formatDate(params.row.maintenanceStartTime, 'YYYY-MM-DD')) }, display: true },
        { title: '维保结束', width: 150, key: 'maintenanceEndTime', render: (h, params) => { return h('span', formatDate(params.row.maintenanceEndTime, 'YYYY-MM-DD')) }, display: true },
        { title: '金额', width: 100, key: 'money', display: true }
      ]
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 获取借用工单信息
    fetch() {
      if (this.workOrderNum !== 'NULL') {
        detail(this.workOrderNum, this.taskId).then(response => {
          this.formItem = {
            ...response.data
          }
          this.formItem.receiveDate = formatDate(this.formItem.receiveDate, 'YYYY-MM-DD')
          this.formItem.purchaseDate = formatDate(this.formItem.purchaseDate, 'YYYY-MM-DD')
          if (this.formItem.categories === '3') {
            const hiddenColumns = ['bigTypeName', 'middleTypeName', 'originalCode', 'supplierName', 'locationName', 'code', 'measureUnit', 'serialnumber', 'computerRoom', 'cabinet', 'location', 'maintenanceStartTime', 'maintenanceEndTime', 'contractNo', 'usePeriod', 'managementOrgName', 'managementUserName']
            this.assetColumns = this.assetColumns.filter(e => !hiddenColumns.includes(e.key))
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    },
    onSelectionChange(val) {
      this.selectionRows = val
    },
    print() {
      const that = this
      getMyPrinter().then(config => {
        if (config.data && config.data.ip) {
          Printer.connect(config.data, ok => {
            Printer.printLabel(that.selectionRows)
          }, error => {
            that.$message({
              showClose: true,
              message: error,
              type: 'warning'
            })
          })
        } else {
          that.$message({
            showClose: true,
            message: '未设置打印机，请先设置打印机',
            type: 'warning'
          })
        }
      })
    },
    edit(row) {
      if (row.locked === true) {
        this.$message({
          type: 'warning',
          message: '此资产正在走流程，不能编辑！'
        })
        return
      }
      // 更新当前被编辑实体的ID，自动传递至编辑表单
      this.editId = row.id
      this.categories = row.categories
      // 打开对话框
      this.dialogFormVisible = true
    },
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .fixed-table-table {
    margin: 8px 8px 8px 0;
  }
</style>
